<!--
 * @Author: wang_zhongwang wang_zhongwang@uxsino.com
 * @Date: 2023-03-24 17:22:17
 * @LastEditors: wang_zhongwang wang_zhongwang@uxsino.com
 * @LastEditTime: 2023-03-24 17:22:17
 * @Description: 产品详情
-->
<template>
  <div class="content-box">
    <div class="page-title">
      <div class="left">
        <div class="bar" />
        <span class="title">产品详情</span>
      </div>
      <div class="right" @click="goBack">
        <img src="@/assets/images/c6/back.png" class="icon">
        <span class="back">返回</span>
      </div>
    </div>
    <el-row class="row1">
      <div class="chart-wrapper">
        <el-card class="box-card" style="background-color: #ffffff">
          <div slot="header" class="clearfix" style="background-color: #ffffff">
            <span class="dm-bold">{{ product.productName }}</span>
            <span class="dmc-sub-title dm-pl8 dmc-dev-amount"> ID: {{ product.id }}</span>
            <span class="dmc-sub-title dm-pl8 dmc-dev-amount"> 标识: {{ product.productIdentification }}</span>
            <el-button
              icon="el-icon-edit"
              plain
              size="mini"
              style="float: right;"
              type="danger"
              @click="handleUpdate">
              更新产品信息
            </el-button>
          </div>
          <el-form label-width="120px">
            <el-row style="display: flex;justify-content: space-around;">
              <el-col :span="10">
                <el-form-item label="产品名称：">{{ product.productName }}</el-form-item>
                <el-form-item label="产品型号：">{{ product.model }}</el-form-item>
                <el-form-item label="厂商ID：">{{ product.manufacturerId }}</el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="产品状态：">{{ product.status == 0 ? '启用' : '禁用' }}</el-form-item>
                <el-form-item label="数据格式：">{{ product.dataFormat }}</el-form-item>
                <el-form-item label="厂商名称：">{{ product.manufacturerName }}</el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="协议类型：">{{ product.protocolType }}</el-form-item>
                <el-form-item label="产品描述：">{{ product.remark }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </el-row>
    <el-row class="row2">
      <Services :product-identification="this.productIdentification" />
      <!--      <div class="chart-wrapper">-->
      <!--        <el-card class="box-card">-->
      <!--          <el-tabs v-model="activeName">-->
      <!--            <el-tab-pane label="模型定义" name="first">-->
      <!--              <div>-->
      <!--                <Services :product-identification="this.productIdentification" />-->
      <!--              </div>-->
      <!--            </el-tab-pane>-->
      <!--            <el-tab-pane label="设备事件" name="second">-->
      <!--              <div>-->
      <!--                <Event :product-identification="this.productIdentification" />-->
      <!--              </div>-->
      <!--            </el-tab-pane>-->
      <!--          </el-tabs>-->
      <!--        </el-card>-->
      <!--      </div>-->
    </el-row>
    <!-- 添加或修改产品管理对话框 -->
    <base-dialog :close-on-click-modal="false" :title="updateDialog.title" :visible.sync="updateDialog.open" append-to-body width="500px" @updateData="submitForm" @closed="cancel">
      <el-form ref="form" :model="updateDialog.form" :rules="updateDialog.rules" label-width="120px">
        <el-form-item label="产品名称" prop="productName">
          <el-col :span="22">
            <el-input v-model="updateDialog.form.productName" placeholder="请输入产品名称" />
          </el-col>
          <el-col :span="2" style="padding-left: 5px">
            <el-tooltip class="item" content="自定义，支持中文、英文大小写、数字、下划线和中划线" effect="light" placement="right-start">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-col>
        </el-form-item>
        <el-form-item label="厂商ID" prop="manufacturerId">
          <el-col :span="22">
            <el-input v-model="updateDialog.form.manufacturerId" placeholder="请输入厂商ID" />
          </el-col>
          <el-col :span="2" style="padding-left: 5px">
            <el-tooltip class="item" content="支持英文大小写，数字，下划线和中划线" effect="light" placement="right-start">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-col>
        </el-form-item>
        <el-form-item label="厂商名称" prop="manufacturerName">
          <el-col :span="22">
            <el-input v-model="updateDialog.form.manufacturerName" placeholder="请输入厂商名称" />
          </el-col>
          <el-col :span="2" style="padding-left: 5px">
            <el-tooltip class="item" content="支持英文大小写，数字，下划线和中划线" effect="light" placement="right-start">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-col>
        </el-form-item>
        <el-form-item label="产品描述" prop="remark">
          <el-input v-model="updateDialog.form.remark" placeholder="请输入产品描述" type="textarea" />
        </el-form-item>
      </el-form>
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
      <!--        <el-button @click="cancel">取 消</el-button>-->
      <!--      </div>-->
    </base-dialog>
    <!-- 添加或修改产品管理对话框 -->
  </div>
</template>

<script>
import { getProductById, updateProduct } from '@/api/cms/winglinks/product'
import Services from './service'
import Event from './event'

export default {
  components: { Services, Event },
  data() {
    return {
      productId: null,
      // 查看页面数据
      product: null,
      productIdentification: null,
      // table切换
      activeName: 'first',
      updateDialog: {
        title: null,
        open: false,
        // 表单参数
        form: {
          id: null,
          productName: null,
          manufacturerId: null,
          manufacturerName: null,
          remark: null
        },
        // 表单校验
        rules: {
          productName: [
            { required: true, message: '产品名称不能为空', trigger: 'blur' },
            { min: 2, max: 64, message: '产品名称长度必须介于 2 和 64 之间', trigger: 'blur' },
            {
              // pattern: /^(?!_)(?!.*?_$)(?!-)(?!.*?-$)[\u4e00-\u9fa5a-zA-Z0-9_-]+$/,
              // message: "中文、英文大小写、数字、下划线和中划线，不能以下划线中划线开头和结尾，长度[2,64]",
              pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_-]+$/,
              message: '中文、英文大小写、数字、下划线和中划线，长度[2,64]',
              trigger: 'blur'
            }
          ],
          manufacturerId: [
            { required: true, message: '厂商ID不能为空', trigger: 'blur' },
            { min: 2, max: 50, message: '厂商ID长度必须介于 2 和 50 之间', trigger: 'blur' },
            {
              pattern: /^[a-zA-Z0-9_-]+$/,
              message: '英文大小写、数字、下划线和中划线，长度[2,50]',
              trigger: 'blur'
            }
          ],
          manufacturerName: [
            { required: true, message: '厂商名称不能为空', trigger: 'blur' },
            { min: 2, max: 64, message: '厂商名称长度必须介于 2 和 64 之间', trigger: 'blur' },
            {
              pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_-]+$/,
              message: '中文、英文大小写、数字、下划线和中划线，长度[2,64]',
              trigger: 'blur'
            }
          ]
        }
      }
    }
  },
  activated() {
    const productId = this.$route.query.productId
    if (productId) {
      this.productId = productId
      this.getDetail(productId)
    }
  },
  methods: {
    getDetail(id) {
      getProductById(id).then(response => {
        console.log(response.data)
        this.productIdentification = response.data.productIdentification
        this.product = response.data
      })
    },

    // 表单重置
    reset() {
      this.updateDialog.form = {
        id: null,
        productName: null,
        manufacturerId: null,
        manufacturerName: null,
        remark: null
      }
    },

    // 取消按钮
    cancel() {
      this.updateDialog.open = false
      this.reset()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.updateDialog.form = this.product
      this.updateDialog.open = true
      this.updateDialog.title = '修改产品'
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.updateDialog.form.id != null) {
            updateProduct(this.updateDialog.form).then((response) => {
              this.updateDialog.open = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getDetail(this.updateDialog.form.id)
            })
          }
        }
      })
    },
    // 打开弹框前执行
    beforeOpenDialog() {},
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/.el-card__header{
    background-color: #ffffff;
  }
  .content-box{
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .page-title{
    height: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    .left{
      height: 100%;
      align-items: center;
      display: flex;
      flex-direction: row;
      margin-left: 3px;
      .bar{
        width: 7px;
        height: 70%;
        border-radius: 2px;
        background: #409EFF;
        margin-right: 10px;
      }
      .title{
        font-weight: 600;
        font-size: 18px;
        color: #303133;
      }
    }
    .right{
      height: 100%;
      align-items: center;
      display: flex;
      flex-direction: row;
      line-height: 100%;
      .icon{
        margin-right: 5px;
        height: 60%;
        width: auto;
      }
      .back{
        font-size: 16px;
        color: #409EFF;
      }

    }
  }
  .row1{
    width: 100%;
    height: 28%;
    margin-bottom: 20px;
    .chart-wrapper{
      width: 100%;
      height: 100%;
    }
    .box-card{
      width: 100%;
      height: 100%;
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }

  .row2{
    background-color: white;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    .chart-wrapper{
      width: 100%;
      height: 100%;
    }
    .box-card{
      width: 100%;
      height: 100%;
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }

  .dmc-sub-title {
    font-size: .75rem;
    color: #8a8e99;
  }

  .dm-font16 {
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: 1px solid #dfe1e6;
  }

  .dm-bold {
    font-weight: 700;
  }

  .dm-p18 {
    padding-left: .5rem !important;
  }

  .dmc-dev-amount {
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: 1px solid #dfe1e6;
  }

  /deep/.base-dialog__footer {
    text-align: right;
  }
</style>

